window.addEventListener('load', function () {

    /*
    判断用户名长度：如果长度大于0，显示删除按钮，否则就隐藏
    事件源：user  事件类型：keyup
    */
    let user = document.querySelector('.user')  //用户名
    let delBtn = document.querySelector('.del-btn')  //删除用户名按钮
    user.addEventListener('keyup', function () {

        // 获取用户名长度
        let len = user.value.length;

        // 判断
        if (len > 0) {
            delBtn.style.display = 'block'
        } else {
            delBtn.style.display = 'none'
            userMsg.innerHTML = ''
            user.style.border = ''
            pwdMsg.innerHTML = ''
            pwd.style.border = ''
        }
    })

    // 点击删除按钮，清空用户名，隐藏自己
    delBtn.addEventListener('click', function () {

        // 清空用户名
        user.value = ''
        // 隐藏
        delBtn.style.display = 'none'
        userMsg.innerHTML = ''
        user.style.border = ''
        pwdMsg.innerHTML = ''
        pwd.style.border = ''
    })

    let pwd = document.querySelector('.pwd')  //密码
    let eyes = document.querySelector('.eyes')  //图片 眼睛

    /*
        点击图片（眼睛）
        改变当前图片得src值
        改变当前pwd框得type属性值
    */

    // 定义标杆

    let eyeFlag = true

    eyes.addEventListener('click', function () {
        if (eyeFlag) {
            eyes.src = './images/open.png'
            pwd.type = 'text'  //文本框
        }
        else {
            eyes.src = './images/close.png'
            pwd.type = 'password' //密码框
        }
        // 切换标杆的值
        eyeFlag = !eyeFlag
    })

    let hideBtn = document.querySelector('.hide-btn')
    
    // 登陆验证
    let userMsg = document.querySelector('.user-msg')
    let pwdMsg = document.querySelector('.pwd-msg')
    let form = document.querySelector('form')

    // 定义标杆初始值
    let flag = {
        userFlag: false,
        pwdFlag: false
    }

    user.addEventListener('blur', function () {
        // 获取输入账号信息
        let userVal = user.value

        // 创建命名规则
        let userReg = /^[A-z][A-z0-9]{4,15}$/;

        // 验证
        let userBool = userReg.test(userVal)

        // 判断
        if (userBool || userVal === '') {
            // userMsg.innerHTML = '正确'
            userMsg.innerHTML = ''
            user.style.border = ''
            flag.userFlag = true
        }
        else {
            userMsg.innerHTML = '用户名错误，请重新输入'
            userMsg.style.color = 'red'
            user.style.border = '1px solid red'
            flag.userFlag = false
        }

    })

    pwd.addEventListener('blur', function () {
        // 获取密码
        let pwdVal = pwd.value;

        // 创建密码规则
        // 5-16:字母开头,后面字母和数字
        let pwdReg = /^[A-z][A-z0-9]{4,15}$/;

        // 验证
        let pwdBool = pwdReg.test(pwdVal)

        // 判断
        if (pwdBool || pwdVal === '') {
            // pwdMsg.innerHTML = '正确'
            pwdMsg.innerHTML = ''
            pwd.style.border = ''
            flag.pwdFlag = true
        }
        else {
            pwdMsg.innerHTML = '密码错误，请重新输入'
            pwdMsg.style.color = 'red'
            pwd.style.border = '1px solid red'
            flag.pwdFlag = false
        }
    })

    form.addEventListener('submit', function () {
        if (!flag.userFlag) {

            // 错误提示信息
            userMsg.innerHTML = '用户名错误，请重新输入'
            userMsg.style.color = 'red'
            user.style.border = '1px solid red'

            // 聚焦到用户名
            user.focus();

            // 阻止表单提交
            event.preventDefault();
        } else if (!flag.pwdFlag) {

            // 错误提示信息
            pwdMsg.innerHTML = '密码错误，请重新输入'
            pwdMsg.style.color = 'red'
            pwd.style.border = '1px solid red'

            // 聚焦到密码上
            pwd.focus();

            // 阻止表单提交
            event.preventDefault();
        }
    })
})

$(function(){
    $('#banner .boxT li').eq(1).click(function () {
        $('#banner .contain>div').eq(0).addClass('hide')
        $('#banner .contain>div').eq(1).removeClass('hide')
    })
})

